import { defineComponent, h, createApp } from "vue";
import type { LoadingOptions } from "./types";

/**
 * 创建一个 loading 组件
 * @param options 
 */
export function createLoadingComponent(options: LoadingOptions) {

  const elLoadingComponent = defineComponent({
    name: "VtLoading",
    setup() {
      const icon = h("svg", {
        xmlns: "http://www.w3.org/2000/svg",
        'xmlns:xlink': "http://www.w3.org/1999/xlink",
        width: '50px',
        height: '50px',
        viewBox: '0 0 50 50',
        style: "enable-background:new 0 0 50 50",
        "xml:space": "preserve",
        class: 'vt-loading__circle'
      }, [h('path', {
        fill: "#409eff",
        d: "M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z",
        transform: "rotate(275.098 25 25)"
      },
        [h('animateTransform', {
          attributeType: "xml", attributeName: "transform", type: "rotate", from: "0 25 25", to: "360 25 25", dur: ".8s", repeatCount: "indefinite"
        })]

      )])


      // setup 函数 要返回一个 render 函数，render 函数要返回一个 h 函数
      return () => {
        return h(icon)
      }
    }
  })

  const loadingInstance = createApp({
    render() {
      return h(elLoadingComponent)
    }
  })

  loadingInstance.mount(document.createElement("div"))

  return {
    ...options,
    ...loadingInstance,
    get $el() {
      return loadingInstance._container as HTMLElement
    }
  }
}